<template>
	<view class="page" style="background-color:#581ADF">
		<form report-submit="true" @submit="setFormId" class="home pr">
			<view class="pr" style="height:700upx">
				<image class="bg-back-w" mode="widthFix" src="/static/images/ui_shouye_bg.png"></image>
				<view class="mCe height60 bottom40 text-center">
					<text class="font-size31 color-white padding10 padding-left48 padding-right48 border-radius40" style="background-color:#391f9c">答题领王者荣耀皮肤</text>
				</view>
			</view>
			<!-- 开始挑战 -->
			<view class="home-content margin-left36 margin-right36 transformZ">
				<button
					form-type="submit"
					v-if="_gameInfo.coupon >= 1"
					@click="btnStart"
					class="formId-btn dis-flex margin-bottom30 border-radius10"
					style="height:141upx; background: linear-gradient(#dc04ff, #dc04ff);"
				>
					<text class="color-white font-size50 line-height mc-bold">开始挑战</text>
				</button>
				<button
					form-type="submit"
					v-else
					@click="popShow('CPay')"
					class="formId-btn dis-flex margin-bottom30 border-radius10"
					style="height:141upx; background: linear-gradient(#dc04ff, #dc04ff);"
				>
					<text class="color-white font-size50 line-height mc-bold">获取次数</text>
				</button>
				<button
					form-type="submit"
					@click="toShare"
					class="formId-btn dis-flex margin-bottom30 border-radius10"
					style="height:141upx; background: linear-gradient(#1fcf86, #1fcf86);"
					v-if="_gameInfo.isOpenShare == 1"
				>
					<text class="color-white font-size50 line-height mc-bold">分享任务</text>
				</button>
				<view class="dis-flex margin-bottom30">
					<view class="bg-back" @tap="toExchange">
						<view class="bg-color-green pr border-radius10 overflow" style="width:324upx;height:227upx">
							<image class="bg-back-w" mode="widthFix" src="/static/images/ui_duijiangqu.png"></image>
							<text class="font-size40 color-white pa top18 left28 mc-bold">兑奖区</text>
						</view>
					</view>
					<view class="bg-back cf" @tap="toRanking">
						<view class="bg-color-blue fr pr border-radius10 overflow bg-img" style="width:324upx;height:227upx">
							<image class="bg-back-w" mode="widthFix" src="/static/images/ui_paihangbang.png"></image>
							<text class="font-size40 color-white pa top18 left28 mc-bold">幸运吃鸡</text>
						</view>
					</view>
				</view>
				<!-- 生日天天赚 -->
				<view>
					<view class="mc-space-between mc-flex-vcenter">
						<view class="mc-bold mc-f18 color-white">生日天天赚</view>
						<image src="../../../static/images/right-arrow.png" class="width24 height24" @tap="toMore"></image>
					</view>
					<view class="margin-top30" @tap="btnGoApp"><image src="/static/images/home-birthday-img.png" style="width: 680rpx;height: 211rpx;"></image></view>
				</view>
				<!-- 砍价免费拿 -->
				<view class="bargain-list-view margin-top30 margin-bottom30"><home-bargain></home-bargain></view>
				<!-- 兑奖滚动  -->
				<!-- <view class="convert-box border-radius10 margin-bottom30"><c-prize-swiper></c-prize-swiper></view> -->
			</view>
			<view class="mCe" style="height:200upx" :style="{ top: statusBarHeight + 'px' }">
				<view class="margin-auto" style="padding-top:100upx;width:95%"><c-text-scroll></c-text-scroll></view>
			</view>
			<button
				form-type="submit"
				@click="popShow('CGameRule')"
				class="formId-btn pa padding18 padding-right26 font-size25 color-white border-top-right-radius40 border-bottom-right-radius40"
				style="top:428upx; background-color:#8f46e4"
			>
				活动规则
			</button>
			<!-- 签到 -->
			<view @click="popShow('CCheckIn')" class="pa-r right26 bottom36 check-in" style="top:545upx">
				<image class="bg-back-w" mode="widthFix" src="/static/images/ui_qiandao.png"></image>
			</view>
			<!-- 导流生日 -->
			<view @click="toBirthday" class="pa left26 bottom36 birthday-icon" style="top:526upx">
				<image class="bg-back-w" mode="widthFix" src="/static/images/ui_birthday.png"></image>
			</view>
		</form>
		<c-pop></c-pop>
		<roof-placement></roof-placement>
		<view class="margin-bottom36"><banner-ad></banner-ad></view>
	</view>
</template>

<script>
import { mapGetters, mapActions } from 'vuex';
import CPrizeSwiper from '@/components/home/c-prize-swiper';
import CTextScroll from '@/components/home/c-text-scroll';
import RoofPlacement from '@/components/home/roof-placement';
import homeBargain from '@/components/home/home-bargain/index.vue';

export default {
	name: 'home',
	components: {
		CPrizeSwiper,
		CTextScroll,
		RoofPlacement,
		homeBargain
	},
	data() {
		return {
			titleNViewBackground: '',
			swiperCurrent: 0,
			swiperLength: 0,
			carouselList: [],
			goodsList: [],
			scrollText: '',
			statusBarHeight: ''
		};
	},
	computed: {
		...mapGetters('user', ['_isLogin', '_gameInfo'])
	},
	methods: {
		...mapActions('pop', ['popShow']),
		...mapActions('user', ['gameInfoUp']),
		btnGoApp() {
			uni.navigateToMiniProgram({
				appId: '1109299115',
				path: '',
				success(res) {
					// 打开成功
					console.log(res);
				}
			});
		},
		btnStart() {
			this.$util.debounce(() => {
				this.popShow('CCountDown');
			})();
		},
		islogin() {
			if (!this._isLogin) {
				uni.reLaunch({
					url: '/pages/authorize/index'
				});
			} else if (!this._gameInfo) {
				this.gameInfoUp();
			}
		},
		toBirthday() {
			uni.navigateToMiniProgram({
				appId: '1109299115',
				path: '',
				success(res) {
					// 打开成功
					console.log(res);
				}
			});
		},
		toRanking() {
			this.$util.debounce(function() {
				uni.navigateToMiniProgram({
					appId: '1109912276',
					path: '',
					success(res) {
						// 打开成功
						console.log(res);
					}
				});
				// uni.navigateTo({
				//   url: '../../home/ranking/ranking'
				// });
			})();
		},
		toExchange() {
			this.$util.debounce(function() {
				uni.navigateTo({
					url: '../../home/exchange/prize/prize'
				});
			})();
		},
		toShare() {
			this.$util.debounce(function() {
				uni.navigateTo({
					url: '../../home/share/share'
				});
			})();
		},
		setFormId(e) {
			this.$store.dispatch('common/formIdListUp', { e: e, isSave: true });
		}
	},
	created() {},
	mounted() {
		this.statusBarHeight = uni.getSystemInfoSync().statusBarHeight;
	},
	onLoad() {
		this.islogin();

		// uni.navigateTo({
		// 	url:'/pages/home/share/share'
		// })
		// uni.redirectTo({
		// 	url:'/pages/bargain/details/details?bargainPartakeId=25'
		// })
	},
	onShow() {
		this.popShow();
		// this.popShow({
		// 	key: 'CCountRebirth',
		// 	value: {
		// 		'isStepTwo': true
		// 	}
		// });
	},
	onShareAppMessage(res) {
		const num = Math.floor(Math.random() * 6 + 1);
		console.log(num);
		if (res.from === 'button') {
			// 来自页面内分享按钮
			console.log(res.target);
		}
		return {
			title: '答题赢Q币和荣耀皮肤，几率极高，快来试试',
			path: '/pages/tabBar/home/index?shareUserId=' + this._gameInfo.userId,
			imageUrl: 'https://miaozhua-test.oss-cn-hangzhou.aliyuncs.com/luckKing/icon/share' + num + '.jpg'
		};
	}
};
</script>

<style lang="scss" scoped>
.home {
	.convert-box {
		background-color: rgba(53, 50, 148, 0.6);
		height: 112upx;
	}

	.birthday-icon {
		width: 145upx;
		height: 145upx;
	}

	.check-in {
		width: 140upx;
		height: 125upx;
	}
}
</style>
